(function () {


// 正则规则
     let reg=/(\w){1,15}/;

  let status=null;
  let tbody=document.querySelector('tbody');
  // 获取添加分类按钮
   let btnAddCate=document.querySelector('#btnAddCate');
  //  获取确定按钮
  let confirm=document.querySelector('.confirm');
  //  获取取消按钮
  let cancel=document.querySelector('.cancel');
  // 获取叉叉按钮取消
  let chacha=document.querySelector('.modal span');
  // 获取模态框
  let modal=document.querySelector('.modal');
  let mask=document.querySelector('.mask');
  let iptName=document.querySelector('.addname');
  let iptOthername=document.querySelector('.othername');
let zz=document.querySelector('.zz');
let zz1=document.querySelector('.zz1');

  // 获取删除按钮
  let btnDelete=document.querySelector('.btn-delete');
  // 获取编辑按钮
  let btnEdit=document.querySelector('.btn-edit');


  let inqueryBook = () => axios.get('/my/cate/list');
  let addBook = (obj) => axios.post('/my/cate/add', obj);
  let delBook = (id) => axios.delete(`/my/cate/del?id=${id}`);
// 获取文章分类详情
let everyBook=(id)=>axios.get(`/my/cate/info?id=${id}`);
// 更新文章
let reBook=(data)=>axios.put('/my/cate/info',data);
   btnAddCate.addEventListener('click',handleAdd)
  
  //  取消
  cancel.addEventListener('click',resetMask )
// 取消
  chacha.addEventListener('click',resetMask )

 let getid=null;

  // 渲染效果
  function render(data) {
    let str = '';
    // data.forEach(({ cate_name, cate_alias , id ,cate_xuhao}) => {
    //   str += `
    //   <tr>
    //   <td>${cate_xuhao}</td>
    //   <td>${cate_name}</td>
    //   <td>${cate_alias}</td>
    //   <td>
    //     <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id='${id}'>
    //       编辑
    //     </button>
    //     <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id='${id}'>
    //       删除
    //     </button>
    //   </td>
    // </tr>
    //    `
    // });
    for (let i = 0; i < data.length; i++) {
      const dat = data[i];
      let tr = `
      <tr>
      <td>${i+1}</td>
      <td>${dat.cate_name}</td>
      <td>${dat.cate_alias}</td>
      <td>
        <button type="button" class="layui-btn layui-btn-xs btn-edit" data-id='${dat.id}'>
          编辑
        </button>
        <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn-delete" data-id='${dat.id}'>
          删除
        </button>
      </td>
    </tr>
              `
      str += tr
      // 替换掉tbody里面的所有内容
      // tbody.innerHTML = str
    }
     tbody.innerHTML = str;
  }


  async function data() {
    let date = await inqueryBook();
    console.log(date);

    //  获取各个分类
     let data = date.data.data;
     console.log(data);
    render(data);
  }
  data();

 
  // 点击添加按钮的回调
 function handleAdd() {
  // 弹出弹框
  status = '添加'
  confirm.textContent = '确定添加'
  modal.style.display='block';
    mask.style.display='block';
}

// 分类名失去聚焦
iptName.addEventListener('blur',function () {
  if (!iptName.value.trim()) {
       zz.style.display='block';
  }else{
    zz.style.display='none';
  }
})

// 分类别名失去焦点
iptOthername.addEventListener('blur',function () {
  if (!reg.test(iptOthername.value)) {
    zz1.style.display='block';
}else{
 zz1.style.display='none';
}
})

confirm.addEventListener('click', handleConfirm)
// 点击确定按钮回调 有可能是确定添加，也有可能确定编辑
async function handleConfirm() {
  if (status === '添加') {
      confirmAdd()
  } else {
      confirmEdit()
  }
  let data = await inqueryBook();
  render(data.data.data);
  resetMask();
    // location.reload();
}

// 确定添加函数
 async function confirmAdd() {

  let obj = {
    "cate_name": iptName.value,
    "cate_alias": iptOthername.value,
  };
  let res = await addBook(obj);
  let data = await inqueryBook();
   if (res.data.success) {
    render(data.data.data);
   } else {
     alert(res.data.message);
   }
  window.location.reload();
}

// 确定编辑
 async function  confirmEdit() {
     let data={
      "id":getid,
      "cate_name": iptName.value,
      "cate_alias": iptOthername.value,
     } 
reBook(data);
let da = await inqueryBook();
render(da.data.data);
 }


// 删除功能
  async function deleteBook(id) {
  await delBook(id);
  // console.log(date);
  let data = await inqueryBook();
  render(data.data.data);
 }

// 点击编辑或者删除的回调
tbody.addEventListener('click',handleBook);

 async function handleBook(e) {
 
  // e.target就是你点击的目标元素
  
  if (e.target.textContent.trim() === '编辑') {
    // 编辑功能
    status = '编辑'
    confirm.textContent = '确定编辑'
    modal.style.display='block';
    mask.style.display='block';
    let res=await everyBook(e.target.dataset.id);
    // 将获取到的数据回填
   
    let onename=res.data.data.cate_name;
    let twoname=res.data.data.cate_alias;
     getid=res.data.data.id;

    iptName.value=onename;
    iptOthername.value=twoname;
   
    

  } else if (e.target.textContent.trim() === '删除') {
    // 删除功能
    deleteBook(e.target.dataset.id)
  }
}


 //  点击取消按钮 重置模态框
 function resetMask() {
  modal.style.display='none';
  mask.style.display='none';
  // 清空input框中的数据
  iptName.value='';
  iptOthername.value='';
}




})()